<template>
  <div class="viewport">
    <homeHead :showLeft="true" :name="'意见反馈'"></homeHead>
    <div class="inputView">
      <div class="inputText">
        <textarea
          id="contents"
          placeholder="请输入反馈内容"
          v-model="postData.opinion"
          maxlength:250
        >
        </textarea>
        <div id="ts">
          <span id="count">{{ postData.opinion.length }}</span> /{{ maxLength }}
        </div>
      </div>

      <div class="inputNum">
        <input
          type="text"
          placeholder="手机/邮箱/QQ (选填)"
          v-model="postData.contactWay"
        />
      </div>

      <div class="uploadImg">上传图片（最多6张）</div>

      <!-- 插件 -->
      <van-uploader
        :after-read="afterRead"
        v-model="fileList"
        multiple
        :max-count="6"
        :max-size="500 * 1024"
      >
        <template #preview-cover="{ file }"> </template>
      </van-uploader>
      <!-- 按钮 -->
      <div class="btn" @click="submit">提交</div>
    </div>
  </div>
</template>
<script>
import homeHead from "./head.vue";
import { Toast } from "mint-ui";
import { postAdvance, uploadOneImg } from "../../api/mine";
export default {
  name: "uploadImages",
  components: {
    homeHead,
  },
  data() {
    return {
      maxLength: 250,
      currentLength: 0,
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
      ],
      postData: {
        opinion: "",
        contactWay: "",
        picturePath: "",
      },
    };
  },
  methods: {
    // 返回布尔值
    beforeRead(file) {
      if (file instanceof Array) {
        //判断是否是数组
        file.forEach((v) => {
          this.checkFile(v);
        });
      } else {
        this.checkFile(file);
      }
      return true;
    },
    //图片类型检查
    checkFile(file) {
      const format = ["jpg", "png", "jpeg"];
      const index = file.name.lastIndexOf(".");
      const finalName = file.name.substr(index + 1);
      if (!format.includes(finalName.toLowerCase())) {
        Toast({
          message: "请上传" + format.join(",") + "格式图片",
          position: "middle",
          duration: 2000,
        });
        return false;
      }
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      if (file instanceof Array) {
        file.map((v) => {
          v.status = "uploading";
          v.message = "上传中...";
          this.uploadImg(v);
        });
      } else {
        file.status = "uploading";
        file.message = "上传中...";
        this.uploadImg(file);
      }
    },
    //上传
    uploadImg(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      uploadOneImg(formData)
        .then((res) => {
          var fileUrl = JSON.parse(res.data.data);
          if (res.data) {
            if (file instanceof Array) {
              //判断是否是数组
              file.map((v, i) => {
                v.status = "success";
                v.message = "";
                v.url = res.data[i];
              });
            } else {
              file.status = "success";
              file.message = "";
              file.url = fileUrl.filePath;
            }
          }
        })
        .catch((err) => {
          Toast({
            message: "上传失败",
            position: "middle",
            duration: 2000,
          });
        });
    },
    //删除
    delUploadImg(item) {
      this.fileList = this.fileList.filter((v) => v.url != item.url);
    },
    // 提交
    submit() {
      var imglist='';
      if (!this.postData.opinion) {
        Toast({
          message: "请输入内容",
          position: "middle",
          duration: 2000,
        });
        return;
      }
      if (!this.postData.contactWay) {
        Toast({
          message: "请输入联系方式",
          position: "middle",
          duration: 2000,
        });
        return;
      }
      // 循环拼接图片
      for (let i of this.fileList) {
        // 如果上传成功
         if(i.status=="success"){
            imglist+=i.url+'-'
         }
      }
      this.postData.picturePath=imglist.slice(0,-1);
      postAdvance(this.postData).then((res) => {
        console.log(res)
           Toast({
          message: res.data.message,
          position: "middle",
          duration: 2000,
        });
      });
    },
  },
};
</script>
<style  lang="scss" scoped>
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
.inputView {
  width: 100%;
  overflow-x: hidden;
  padding: 0 20px;
  background: #fff;
  box-sizing: border-box;
  .inputText {
    width: 100%;
    height: 140px;
    margin: 20px auto;
    background: #f2f2f2;
    border-radius: 5px;
    position: relative;

    #contents {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      border: 1px solid #ddd;
      background: #f2f2f2;
      // text-indent: 1em;
      padding: 10px;
      padding-bottom: 20px;
      box-sizing: border-box;
    }
    #ts {
      position: absolute;
      right: 5px;
      bottom: 5px;
      color: #b2b2b2;
    }
  }

  .inputNum {
    margin-top: 20px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background: #f2f2f2;
    border-radius: 5px;
    margin-bottom: 20px;

    input {
      width: 100%;
      height: 100%;
      line-height: 100%;
      background: #f2f2f2;
      border-radius: 5px;
      outline-style: none;
      border: 0 none;
      padding: 0 10px;
      box-sizing: border-box;
    }
  }
  .uploadImg {
    width: 100%;
    height: 50px;
    padding-top: 10px;
  }
  .photo {
    width: 100%;
    height: 200px;
    border: 1px solid #ddd;
  }
  .btn {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #367bf0;
    color: #fff;
    cursor: pointer;
  }
}
</style>